<template>
    <div class="update-sex">
        <van-picker
        title="修改性别"
        show-toolbar
        :columns="columns"
        :default-index="sex"
        @cancel="$emit('close')"
        @change="onChange"
        @confirm="onConfirm" />
    </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
    name: 'UpdateSex',
    model: {
        prop: 'sex',
        event: 'updateSex'
    },
    props: ['sex'],
    data () {
        return {
            columns: ['男', '女'],
            localsex: this.sex
        }
    },
    methods: {
        onChange (picker, value, index) {
            console.log(picker, value, index)
            this.localsex = index
        },
        async onConfirm () {
            this.$toast.loading({
                message: '保存中...',
                forbidClick: true, // 禁止背景点击
                duration: 0 // 持续时间
            })
            try {
                const localsex = this.localsex
                await updateUserProfile({
                    gender: localsex
                })
                this.$emit('updateSex', localsex)
                this.$emit('close')
                this.$toast.success('更新成功')
            } catch (error) {
                this.$toast.fail('更新失败')
            }
        }
    }
}
</script>
